import React, { useState } from 'react';
import { 
  Popup,
  Field,
  DatetimePicker,
  Button 
} from 'react-vant';
import './TimeRecordPopup.css';

const TimeRecordPopup = ({ visible, onClose }) => {
  const [estimatedTime, setEstimatedTime] = useState('4d 6h 40m');
  const [date, setDate] = useState('2021-12-30');
  const [time, setTime] = useState('2:00 PM');
  const [description, setDescription] = useState('');
  
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [showTimePicker, setShowTimePicker] = useState(false);

  return (
    <Popup
      visible={visible}
      style={{ height: '90vh', borderRadius: '16px 16px 0 0' }}
 
      className="record-popup"
    >
      {/* 头部 */}
      <div className="popup-header">
        <span className="title">记录时间</span>
        <span className="close-icon" onClick={onClose}>×</span>
      </div>

      {/* 已用时间卡片 */}
      <div className="time-card">
        <div className="progress-circle">
          <div className="circle-inner" />
        </div>
        <div className="time-info">
          <div className="used-time">已用：1d 3h 25m</div>
          <div className="estimated-time">预计时间：3d 8h</div>
        </div>
      </div>

      {/* 表单区域 */}
      <div className="form-content">
        <div className="form-item">
          <div className="form-label">预计时间</div>
          <Field
            className="custom-input"
            value={estimatedTime}
            onChange={setEstimatedTime}
            placeholder="4d 6h 40m"
          />
        </div>

        <div className="form-item">
          <div className="form-label">选择日期</div>
          <div 
            className="custom-input date-input"
            onClick={() => setShowDatePicker(true)}
          >
            {date}
            <i className="calendar-icon">📅</i>
          </div>
        </div>

        <div className="form-item">
          <div className="form-label">选择时间</div>
          <div 
            className="custom-input time-input"
            onClick={() => setShowTimePicker(true)}
          >
            {time}
            <i className="time-icon">🕐</i>
          </div>
        </div>

        <div className="form-item">
          <div className="form-label">工作描述</div>
          <Field
            type="textarea"
            className="custom-textarea"
            value={description}
            onChange={setDescription}
            placeholder="添加一些任务描述"
            rows={4}
          />
        </div>
      </div>

      {/* 确定按钮 */}
      <div className="button-wrapper">
        <Button 
          type="primary" 
          block 
          className="submit-button"
          onClick={onClose}
        >
          确定
        </Button>
      </div>

      {/* 日期选择器 */}
      <DatetimePicker
        visible={showDatePicker}
        value={new Date(date)}
        type="date"
        onConfirm={(val) => {
          setDate(val.toLocaleDateString());
          setShowDatePicker(false);
        }}
        onCancel={() => setShowDatePicker(false)}
      />

      {/* 时间选择器 */}
      <DatetimePicker
        visible={showTimePicker}
        value={time}
        type="time"
        onConfirm={(val) => {
          setTime(val);
          setShowTimePicker(false);
        }}
        onCancel={() => setShowTimePicker(false)}
      />
    </Popup>
  );
};

export default TimeRecordPopup;